{% extends "cashflow/base.html" %}
{% load i18n %}

{% block nav %}
  {% include "cashflow/nav.html" %}
{% endblock %}

{% block subnav %}
{% endblock %}

{% block toolbar %}
Add Transaction
{% endblock %}


{% block content %}

<h2>{% trans "Add Money" %}</h2>

<form id="billaddform" title="Repeat" method="POST" action="/cashflow/bill/add/">
{% csrf_token %}
	<table>{{ form }}</table>

  <div id="messagearea"> </div>
  <fieldset>
    <label for="freq" class="label"> Repeats: </label>
    <select id="freq" name="freq">
      <option value="daily" selected="selected">Daily</option>
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
      <option value="yearly">Yearly</option>
    </select>
    <label for="interval" class="label"> Interval: </label>
    <input type="text" size="2" value="1" name="interval" id="interval">
  </fieldset>
  
  <div id="optiondisplay">
    <fieldset id="dailyoption" style="display:none">
    </fieldset>

    <fieldset id="weeklyoption" style="display:none">
      Repeat on:<br />
      <div style="float:left;margin:5px;">
        <label for="byweekday">Mon</label>
        <input type="checkbox" name="byweekday" value="MO">
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Tue</label>
        <input type="checkbox" name="byweekday" value="TU">   
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Wed</label>
        <input type="checkbox" name="byweekday" value="WE"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Thu</label>
        <input type="checkbox" name="byweekday" value="TH"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Fri</label>
        <input type="checkbox" name="byweekday" value="FR"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Sat</label>
        <input type="checkbox" name="byweekday" value="SA"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Sun</label>
        <input type="checkbox" name="byweekday" value="SU">       
      </div>
    </fieldset>

    <fieldset id="monthlyoption" style="display:none">
      Repeat on:<br />
      <input type="radio" value="DAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:DAYOFMONTH">
      <label for="repeatmonthlytype:DAYOFMONTH"> Day </label>
      <select name="bymonthday" id="bymonthday">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      of the month 
      <br />
      <input type="radio" value="WEEKDAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:WEEKDAYOFMONTH">
      <label for="repeatmonthlytype:WEEKDAYOFMONTH"> The </label>
      <select name="weekdayofmonthindex">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
        <option value="4">fourth</option>
        <option value="-1">last</option>
      </select>
      <select name="weekdayofmonth">
        <option value="MO">Monday</option>
        <option value="TU">Tuesday</option>
        <option value="WE">Wednesday</option>
        <option value="TH">Thursday</option>
        <option value="FR">Friday</option>
        <option value="SA">Saturday</option>
        <option value="SU">Sunday</option>
      </select>
      of the month 
    </fieldset>

    <fieldset id="yearlyoption" style="display:none">
      Repeat on:<br />
      <input type="radio" value="DAYOFMONTH" name="riyearlyType" id="repeatyearlytype:DAYOFMONTH">
      <label for="repeatyearlytype:DAYOFMONTH"> Every </label>
      <select name="yearlybymonth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="yearlybymonthday">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      <br />
      <input type="radio" value="WEEKDAYOFMONTH" name="riyearlyType" id="repeatyearlytype:WEEKDAYOFMONTH">
      <label for="repeatyearlytype:WEEKDAYOFMONTH"> The </label>
      <select name="yearlyweekdayofmonth">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
        <option value="4">fourth</option>
        <option value="-1">last</option>
      </select>
      <label for="repeatyearlytype:WEEKDAYOFMONTH"> </label>
      <select name="yearlyweekday">
        <option value="MO">Monday</option>
        <option value="TU">Tuesday</option>
        <option value="WE">Wednesday</option>
        <option value="TH">Thursday</option>
        <option value="FR">Friday</option>
        <option value="SA">Saturday</option>
        <option value="SU">Sunday</option>
      </select>
      of
      <select name="yearlyweekdaymonth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </fieldset>  
  </div>
  <fieldset>
    <label class="label">Start Date:</label><input type="text" name="startdate" id="startdate" value="{{date_from|date:"m/d/Y"}}"><br />
    <label class="label">End recurrence:</label><br />
    <input type="radio" checked="checked" value="NOENDDATE" name="end" id="end">
    Never
    <br />
    <input type="radio" value="BYOCCURRENCES" name="end" id="end">
    After
    <input type="text" size="3" value="10" name="count"> occurrence(s)
    <br />
    <input type="radio" value="BYENDDATE" name="end" id="end">
    On 
    <input type="text" name="enddate" id="enddate">
  </fieldset>  
</form>
{% endblock %}